<template>
  <DefaultLayout>
    <div class="space-y-8">
      <h1 class="text-4xl font-bold">教程中心</h1>
      
      <!-- 教程分类 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div v-for="category in categories" :key="category.id" class="card hover:shadow-lg transition-shadow">
          <h2 class="text-2xl font-semibold mb-4">{{ category.name }}</h2>
          <p class="text-gray-600 mb-4">{{ category.description }}</p>
          <router-link :to="`/tutorials/${category.id}`" class="text-primary hover:underline">
            查看教程 →
          </router-link>
        </div>
      </div>
    </div>
  </DefaultLayout>
</template>

<script setup lang="ts">
import DefaultLayout from '../layouts/DefaultLayout.vue'

const categories = [
  {
    id: 'beginner',
    name: '入门教程',
    description: '适合新手的 Cursor 基础教程，从安装到基本使用'
  },
  {
    id: 'advanced',
    name: '进阶技巧',
    description: '深入探索 Cursor 的高级功能和技巧'
  },
  {
    id: 'ai',
    name: 'AI 功能',
    description: '学习如何充分利用 Cursor 的 AI 辅助功能'
  }
]
</script> 